﻿<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>控制台</title>
    <div th:replace="common/header::header"></div>
</head>

<body>
<div class="navbar navbar-default" id="navbar">
    <!--<script type="text/javascript">-->
    <!--try {-->
    <!--ace.settings.check('navbar', 'fixed')-->
    <!--} catch (e) {-->
    <!--}-->
    <!--</script>-->

    <div class="navbar-container" id="navbar-container">
        <div class="navbar-header pull-left">
            <a href="#" class="navbar-brand">
                <small>
                    <i class="icon-leaf"></i>
                    后台管理系统
                </small>
            </a><!-- /.brand -->
        </div><!-- /.navbar-header -->

        <div class="navbar-header pull-right" role="navigation">
            <ul class="nav ace-nav">
                <li class="light-blue">
                    <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                        <img class="nav-user-photo" src="static/assets/avatars/user.jpg" alt="Jason's Photo"/>
                        <span class="user-info center">
                                        <small>欢迎光临,</small>
                            <!--[[${session.loginuser.username}]]-->
                                        <span th:text=" ${session.loginuser.username}">Jason</span>
                                    </span>

                        <i class="icon-caret-down"></i>
                    </a>

                    <ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                        <li>
                            <a href="#">
                                <i class="icon-cog"></i>
                                设置
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <i class="icon-user"></i>
                                个人资料
                            </a>
                        </li>

                        <li class="divider"></li>

                        <li>
                            <a href="/logout">
                                <i class="icon-off"></i>
                                退出
                            </a>
                        </li>
                    </ul>
                </li>
            </ul><!-- /.ace-nav -->
        </div><!-- /.navbar-header -->
    </div><!-- /.container -->
</div>
<div class="main-container" id="main-container">
    <div class="main-container-inner">
        <a class="menu-toggler" id="menu-toggler" href="#">
            <span class="menu-text"></span>
        </a>

        <div class="sidebar" id="sidebar">
            <ul class="nav nav-list">
                <li class="active">
                    <a href="/index" onclick="setActive(this)">
                        <i class="icon-dashboard"></i>
                        <span class="menu-text"> 首页 </span>
                    </a>
                </li>
                <li>
                    <a href="#" class="dropdown-toggle" onclick="setActive(this)">
                        <i class="icon-desktop"></i>
                        <span class="menu-text"> 用户管理 </span>

                        <b class="arrow icon-angle-down"></b>
                    </a>

                    <ul class="submenu" style="display: block">
                        <li>
                            <a href="/user/list" target="mainFrame" onclick="setActive(this)">
                                <i class="icon-double-angle-right"></i>
                                用户列表
                            </a>
                        </li>
                        <li>
                            <a href="/user/add" target="mainFrame" onclick="setActive(this)">
                                <i class="icon-double-angle-right"></i>
                                添加用户
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#" class="dropdown-toggle" onclick="setActive(this)">
                        <i class="icon-desktop"></i>
                        <span class="menu-text"> 系统管理 </span>

                        <b class="arrow icon-angle-down"></b>
                    </a>

                    <ul class="submenu" style="display: block">
                        <li>
                            <a href="/monitor/server" target="mainFrame" onclick="setActive(this)">
                                <i class="icon-double-angle-right"></i>
                                系统监控
                            </a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="#" class="dropdown-toggle" onclick="setActive(this)">
                        <i class="icon-adjust"></i>
                        <span class="menu-text"> 测试页面 </span>

                        <b class="arrow icon-angle-down"></b>
                    </a>

                    <ul class="submenu" style="display: block">
                        <li>
                            <a href="/test/kaptcha" target="mainFrame" onclick="setActive(this)">
                                <i class="icon-double-angle-right"></i>
                                验证码测试
                            </a>
                        </li>
                        <li>
                            <a href="/test/modal" target="mainFrame" onclick="setActive(this)">
                                <i class="icon-double-angle-right"></i>
                                自定义模态框测试
                            </a>
                        </li>
                        <li>
                            <a href="/test/upload" target="mainFrame" onclick="setActive(this)">
                                <i class="icon-double-angle-right"></i>
                                文件上传
                            </a>
                        </li>
                        <li>
                            <a href="/test/download" target="mainFrame" onclick="setActive(this)">
                                <i class="icon-double-angle-right"></i>
                                文件下载
                            </a>
                        </li>
                        <li>
                            <a href="/test/importExcel" target="mainFrame" onclick="setActive(this)">
                                <i class="icon-double-angle-right"></i>
                                excel文件读取入数据库(jxl)
                            </a>
                        </li>
                        <li>
                            <a href="/test/easypoiExportExcel" target="mainFrame" onclick="setActive(this)">
                                <i class="icon-double-angle-right"></i>
                                excel文件导出(easyPoi)
                            </a>
                        </li>
                    </ul>
                </li>

            </ul>

            <div class="sidebar-collapse" id="sidebar-collapse">
                <i class="icon-double-angle-left" data-icon1="icon-double-angle-left"
                   data-icon2="icon-double-angle-right"></i>
            </div>

        </div>

        <div class="main-content">
            <iframe id="mainFrame" name="mainFrame" src="/home"
                    style="overflow:visible;" scrolling="yes" frameborder="no" height="100%" width="100%"></iframe>
            <script>
                //iframe高度
                //'frameContent'子元素页面的最外层id
                function setIframeHeight(iframe) {
                    if (iframe) {
                        iframe.height = window.innerHeight - 95;
                        // console.log(iframe.height);
                    }
                };

                var iframe = document.getElementById('mainFrame');

                iframe.onload = function () {
                    setIframeHeight(iframe);
                };
                // 页面大小变化的时候,重新设定frame的高度
                window.onresize = function (ev) {
                    setIframeHeight(iframe);
                }
            </script>
        </div><!-- /.main-content -->


    </div><!-- /.main-container -->

</body>
<footer>
    <div th:replace="common/footer::footer_js"></div>

    <script>
        // 菜单激活的箭头显示,完成了直接点击的效果,但是在右边页面直接跳转页面的时候,无法实现箭头自动跳转
        function setActive(e) {
            var sidebar = document.getElementById("sidebar");
            var tag_li = sidebar.getElementsByTagName("li");
            for (var i = 0; i < tag_li.length; i++) {
                tag_li[i].setAttribute("class", "");
            }
            var node = e.parentElement;
            node.setAttribute("class", "active");
        }

    </script>
</footer>
</html>

